{include file="public/header"}

<script src="/public/static/mobile/js/axios.min.js"></script>
		<style type="text/css">
	
			.mainPage .contentBoxs .boxs1{
				width: 100%;
				height: auto;
				background-color: #fff;
				border-radius: 10px;
				height: auto;
				margin-top: 10px;
				padding-bottom: 0.8rem;
			}
			.mainPage .contentBoxs .boxs1 .titleBoxs{
				width: 100%;
				height: 1.3rem;
				line-height: 1.3rem;
				font-size: 0.5rem;
				color: #2E3192;
				text-align: center;
				letter-spacing: 4px;
				position: relative;
			}
			.mainPage .contentBoxs .boxs1 .titleBoxs:after{
				content: "";
				width: 76%;
				height: 1px;
				position: absolute;
				left: 13%;
				bottom: 0;
				background-color: #E6E6E6;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs{
				width: 76%;
				height: auto;
				box-sizing: border-box;
				margin: auto;
				padding: 20px 0;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows{
				width: 100%;
				height: auto;
				padding: 8px 0;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .lab{
				width: 100%;
				height: auto;
				font-size: 0.32rem;
				color: #000000;
				font-weight: bold;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .lab .bt{
				font-size: 0.28rem;
				font-weight: normal;
				color: rgba(230, 0, 18,0.6);
				padding-left: 3px;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .val{
				font-size: 0.28rem;
				color: #666666;
				padding: 4px 0;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .val .inputs{
				width: 100%;
				height: 0.7rem;
				font-size: 0.29rem;
				padding-left: 5px;
				box-sizing: border-box;
				outline: none;
				border: 1px solid #ccc;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .val .inputs::-webkit-input-placeholder {
			    font-size: 0.29rem;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .val .inputs.disableds{
				background-color: rgba(0,0,0,0.06);
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .val .textareas{
				width: 100%;
				height: 2rem;
				font-size: 0.29rem;
				padding-left: 5px;
				box-sizing: border-box;
				outline: none;
				padding-top: 0.1rem;
				border: 1px solid #ccc;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .val .textareas::-webkit-input-placeholder {
			    font-size: 0.29rem;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .imgBoxs{
				width: 100%;
				height: auto;
				padding: 0.2rem 0;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .imgBoxs .imgs{
				width: calc(33.33333% - 0.14rem);
				height: 1.5rem;
				border-radius: 5px;
				overflow: hidden;
				background-color: #eee;
				margin-right: 0.14rem;
				margin-bottom: 0.14rem;
				float: left;
				position: relative;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .imgBoxs .imgs .del{
				font-size: 0.36rem;
				width: 0.4rem;
				height: 0.4rem;
				line-height: 0.4rem;
				text-align: center;
				border-radius: 50%;
				position: absolute;	
				top: 0.05rem;
				right: 0.05rem;
				background-color: rgba(0,0,0,0.6);
				color: #fff;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .imgBoxs .imgs.addimgBx{
				background-color: #eee;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .imgBoxs .imgs.addimgBx .text1{
				font-size: 0.4rem;
				width: 100%;
				height: auto;
				text-align: center;
				padding-top: 0.2rem;
				color: #777;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .imgBoxs .imgs.addimgBx .text2{
				font-size: 0.26rem;
				width: 100%;
				height: auto;
				text-align: center;
				color: #777;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows  .videoBoxs{
				width: 100%;
				height: 2.5rem;
				background-color: #eee;
				margin: 0.2rem 0;
				position: relative;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows  .videoBoxs .delVideo{
				font-size: 0.36rem;
				width: 0.5rem;
				height: 0.5rem;
				line-height: 0.5rem;
				text-align: center;
				border-radius: 50%;
				position: absolute;	
				top: 0.05rem;
				right: 0.05rem;
				background-color: rgba(0,0,0,0.6);
				color: #fff;
				z-index: 5;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows  .videoBoxs.addVideo{
				background-color: #eee;
				border-radius: 5px;
				overflow: hidden;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows  .videoBoxs.addVideo .text1{
				font-size: 0.4rem;
				width: 100%;
				height: auto;
				text-align: center;
				padding-top: 0.7rem;
				color: #777;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows  .videoBoxs.addVideo .text2{
				font-size: 0.26rem;
				width: 100%;
				height: auto;
				text-align: center;
				color: #777;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .btnBox{
				width: 100%;
				height: auto;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .btnBox .btn{
				width: 2rem;
				height: 0.7rem;
				background-color: #394B8F;
				border: 0;
				outline: none;
				color: #fff;
				font-size:0.34rem;
				letter-spacing: 0.1rem;
			}
			
			.uploadLoadingBox{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 6;
				background-color: rgba(255,255,255,0.8);
			}
			.uploadLoadingBox .imgBoxss{
				width: 100%;
				/* height: 1rem; */
				padding-top: 0.1rem;
			}
			.uploadLoadingBox .textBoxss{
				width: 100%;
				height: 0.4rem;
				line-height: 0.4rem;
				text-align: center;
				font-size: 0.22rem;
				color: #394B8F;
			}



			

			.spinner {
				/* margin: 100px auto; */
				width: 0.4rem;
				height: 0.4rem;
				position: relative;
				margin: 0.2rem auto;
			}
			
			.container1 > div, .container2 > div, .container3 > div {
				width: 6px;
				height: 6px;
				background-color: #394B8F;
			
				border-radius: 100%;
				position: absolute;
				-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
				animation: bouncedelay 1.2s infinite ease-in-out;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			
			.spinner .spinner-container {
				position: absolute;
				width: 100%;
				height: 100%;
			}
			
			.container2 {
				-webkit-transform: rotateZ(45deg);
				transform: rotateZ(45deg);
			}
			
			.container3 {
				-webkit-transform: rotateZ(90deg);
				transform: rotateZ(90deg);
			}
			
			.circle1 { top: 0; left: 0; }
			.circle2 { top: 0; right: 0; }
			.circle3 { right: 0; bottom: 0; }
			.circle4 { left: 0; bottom: 0; }
			
			.container2 .circle1 {
				-webkit-animation-delay: -1.1s;
				animation-delay: -1.1s;
			}
			
			.container3 .circle1 {
				-webkit-animation-delay: -1.0s;
				animation-delay: -1.0s;
			}
			
			.container1 .circle2 {
				-webkit-animation-delay: -0.9s;
				animation-delay: -0.9s;
			}
			
			.container2 .circle2 {
				-webkit-animation-delay: -0.8s;
				animation-delay: -0.8s;
			}
			
			.container3 .circle2 {
				-webkit-animation-delay: -0.7s;
				animation-delay: -0.7s;
			}
			
			.container1 .circle3 {
				-webkit-animation-delay: -0.6s;
				animation-delay: -0.6s;
			}
			
			.container2 .circle3 {
				-webkit-animation-delay: -0.5s;
				animation-delay: -0.5s;
			}
			
			.container3 .circle3 {
				-webkit-animation-delay: -0.4s;
				animation-delay: -0.4s;
			}
			
			.container1 .circle4 {
				-webkit-animation-delay: -0.3s;
				animation-delay: -0.3s;
			}
			
			.container2 .circle4 {
				-webkit-animation-delay: -0.2s;
				animation-delay: -0.2s;
			}
			
			.container3 .circle4 {
				-webkit-animation-delay: -0.1s;
				animation-delay: -0.1s;
			}
			
			@-webkit-keyframes bouncedelay {
				0%, 80%, 100% { -webkit-transform: scale(0.0) }
				40% { -webkit-transform: scale(1.0) }
			}
			
			@keyframes bouncedelay {
				0%, 80%, 100% {
				transform: scale(0.0);
				-webkit-transform: scale(0.0);
				} 40% {
				transform: scale(1.0);
				-webkit-transform: scale(1.0);
				}
			}


			/* 点击图片放大 */
			.maxImg{
					width: 100%;
					height: 100%;
					position: fixed;
					top: 0;
					left: 0;
					background-color: rgba(0,0,0,0.8);
					z-index: 10;
				}
				.maxImg .imgB{
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
				}
				.maxImg .imgB .imgss{
					max-width: 100%;
					max-height: 100%;
					align-items: center;
					margin: auto;
				}
			
			
		</style>

		<div id="index">
			
			<div class="mainPage">
				<div class="contentBoxs">
					<div class="bgBox" :style="{minHeight: winHeight}"></div>
					<div style="position: relative;z-index: 8;">
						<div class="headGoBackBox">
							<div class="backBtn" @click="goBack">
								<div class="goBackI"><img src="/public/static/mobile/image/goBackIcon.png" style="width: 100%;"></div>
								<div class="goBackT">返回</div>
							</div>
							<div style="flex: 1;"></div>
						</div>
                        {include file="public/logobox"}
						<div class="boxs1">
							<div class="titleBoxs">填写维修记录</div>
							<div class="centerBoxs">
								<div class="rows">
									<div class="lab">设备名称</div>
									<div class="val"><input class="inputs disableds" placeholder="请填写设备名称" v-model="deviceName" disabled/></div>
								</div>
								<div class="rows">
									<div class="lab">序列号</div>
									<div class="val"><input class="inputs disableds" placeholder="请填写序列号" v-model="sn" disabled/></div>
								</div>
								<div class="rows">
									<div class="lab">故障原因<span class="bt">*</span></div>
									<div class="val"><textarea class="textareas" placeholder="请填写故障原因" v-model="faultCause"></textarea></div>
								</div>
								<div class="rows">
									<div class="lab">联系人<span class="bt">*</span></div>
									<div class="val"><input class="inputs" placeholder="请填写送修联系人" v-model="sendContactName"/></div>
								</div>
								<div class="rows">
									<div class="lab">联系电话<span class="bt">*</span></div>
									<div class="val"><input class="inputs" type="tel" placeholder="请填写送修联系电话" v-model="sendContactPhone"/></div>
								</div>
								<div class="rows">
									<div class="lab">邮箱</div>
									<div class="val"><input class="inputs" type="tel" placeholder="请填写邮箱" v-model="sendContactEmail"/></div>
								</div>
								<div class="rows">
									<div class="lab">送修单位</div>
									<div class="val"><input class="inputs" placeholder="请填写送修单位" v-model="sendUnit"/></div>
								</div>
								<!-- <div class="rows">
									<div class="lab">维修项目</div>
									<div class="val"><input class="inputs" placeholder="请填写维修项目" v-model="maintainObj"/></div>
								</div>
								<div class="rows">
									<div class="lab">维修人</div>
									<div class="val"><input class="inputs" placeholder="请填写维修人姓名" v-model="maintainName"/></div>
								</div>
								<div class="rows">
									<div class="lab">维修时间</div>
									<div class="val"><input class="inputs" type="date"  placeholder="维修时间(格式必须：2020-02-02)" v-model="maintainTime"/></div>
								</div> -->
								<div class="rows">
									<div class="lab">图片</div>
									<div class="imgBoxs" id="imgBox">
										<div class="imgs" v-show="lists1.length>0" v-cloak v-for="(v,i) in lists1" :key="i" v-bind:style="{ background: 'url('+ v.src +') no-repeat center', backgroundSize:'cover' }">
											<img :src="v.src" :data-imgurl="v.src" style="width: 100%;height:100%;opacity: 0;" @click="viewImgs(i)"/>
											<div class="del" @click="delImg(i)">×</div>
											<!-- 正在上传图片的加载动画 -->
											<div class="uploadLoadingBox" v-if="imgsss">
												<div class="imgBoxss">
													<div class="spinner">
														<div class="spinner-container container1">
															<div class="circle1"></div>
															<div class="circle2"></div>
															<div class="circle3"></div>
															<div class="circle4"></div>
														</div>
														<div class="spinner-container container2">
															<div class="circle1"></div>
															<div class="circle2"></div>
															<div class="circle3"></div>
															<div class="circle4"></div>
														</div>
														<div class="spinner-container container3">
															<div class="circle1"></div>
															<div class="circle2"></div>
															<div class="circle3"></div>
															<div class="circle4"></div>
														</div>
													</div>
												</div>
												<div class="textBoxss">图片上传中</div>
											</div>
										</div>
										<div class="imgs addimgBx" v-if="lists1.length<limitNum">
											<div style="width: 100%;height: 100%;" @click="choiceImg">
												<div class="text1">+</div>
												<div class="text2">点击上传</div>
												<input type="file" multiple ref="filElem" accept="image/*" class="up-file" id="add-pic-btn" @change="addImg()" style="opacity: 0;">
											</div>
											
											<!-- 正在上传图片的加载动画 -->
											<div class="uploadLoadingBox" v-if="ifUploadImg">
												<div class="imgBoxss">
													<div class="spinner">
														<div class="spinner-container container1">
															<div class="circle1"></div>
															<div class="circle2"></div>
															<div class="circle3"></div>
															<div class="circle4"></div>
														</div>
														<div class="spinner-container container2">
															<div class="circle1"></div>
															<div class="circle2"></div>
															<div class="circle3"></div>
															<div class="circle4"></div>
														</div>
														<div class="spinner-container container3">
															<div class="circle1"></div>
															<div class="circle2"></div>
															<div class="circle3"></div>
															<div class="circle4"></div>
														</div>
													</div>
												</div>
												<div class="textBoxss">图片上传中</div>
											</div>
											
										</div>
										<div style="clear: both;"></div>
									</div>
								</div>
								<div class="rows">
									<div class="lab" id="sp">视频</div>
									<div class="videoBoxs addVideo" v-show="videoSrc">
										<video :src="videoSrc1" controls="controls" width="100%" height="100%"></video>
										<div class="delVideo" @click="delVideo()">×</div>
									</div>
									<div class="videoBoxs addVideo" v-show="!videoSrc">
										<div style="width: 100%;height: 100%;" @click="choiceVideo">
											<div class="text1">+</div>
											<div class="text2">点击上传</div>
											<input type="file" ref="filElemVideo" accept="video/*"  @change="getBigectURL($event)" style="opacity: 0;"/>
										</div>

										<!-- 正在上传视频的加载动画 -->
										<div class="uploadLoadingBox" v-if="ifUploadVideo">
											<div class="imgBoxss" style="padding-top: 13%;">
												<div class="spinner">
													<div class="spinner-container container1">
														<div class="circle1"></div>
														<div class="circle2"></div>
														<div class="circle3"></div>
														<div class="circle4"></div>
													</div>
													<div class="spinner-container container2">
														<div class="circle1"></div>
														<div class="circle2"></div>
														<div class="circle3"></div>
														<div class="circle4"></div>
													</div>
													<div class="spinner-container container3">
														<div class="circle1"></div>
														<div class="circle2"></div>
														<div class="circle3"></div>
														<div class="circle4"></div>
													</div>
												</div>
											</div>
											<div class="textBoxss">视频上传中</div>
										</div>

									</div>
								</div>
								<!-- <div class="rows">
									<div class="lab">视频</div>
									<div class="val"><input  type="file" id="file_video"  accept="video/*" multiple  @click="upvideo($event)" /></div>
								</div> -->
								<!-- <div class="rows">
									<div class="lab" id='sp'>视频</div>
									<div class="val">
										<div class="ad-img">
									
									<ul class="sctp mt15">
										<li><div class="upload-btn"><input type="file" accept="video/*" name="" id=""></div>
										</li>
									</ul>
									</div>
								</div>
							
								</div>	 -->
								
								<div class="btnBox"><button class="btn" v-on:click="throttle(3000)">提交</button></div>
							</div>
						</div>
                        {include file="public/footerbox"}
					</div>
				</div>
			</div>

			<!-- 点击图片放大 -->
			<div class="maxImg" v-if="maxImgBox" @touchmove.prevent>
				<div class="imgB" @click="closeImg">
					<img :src="lists1[maxImgIndex].src" class="imgss" @click="closeImg"/>
				</div>
			</div>
			
            {include file="public/popup"}
		</div>

		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>


<script type = "text/javascript">
	var real_sn="{$real_sn}";
	var srcArr1=[];
	new Vue({
	  	el: '#index',
	  	data: function () {
		  	return {
		  		real_sn:real_sn,
		  		showstate:false,  //提示窗
		  		toastMsg:"",   //提示窗的文字
				sn:"",
				deviceName:"",
				imgsss:true,
				ifUploadImg:false,  //是否正在上传图片
				ifUploadVideo:false,  //是否正在上传视频
				maxImgBox:false,  //放大图片的弹窗
				maxImgIndex:0,  //放大图片的index
		  		
		  		winHeight:document.documentElement.clientHeight+"px",
		    	
				list:[], //用于结构渲染(图片)
				lists1:[],
                allArr:[],  //存储每次上传的所有flie，
                limitNum:9, //限制数量
                
                videoSrc: '',  //视频地址
				videoSrc1: '',  //视频预览地址
				imgSrc: '',  //图片地址
				
				equipmentName:"",   //设备名称
				equipmentSn:"",     //设备序列号
				faultCause:"",     //设备故障原因
				maintainObj:"",     //设备维修项目
				maintainName:"",    //设备维修人姓名
				maintainTime:"",     //设备维修时间
				sendUnit:"",         //设备送修单位
				sendContactName:"",     //设备送修联系人
				sendContactPhone:"",     //设备送修联系电话
				sendContactEmail:"",    //邮箱

				lastTime:0 //默认上一次点击时间为0 

		  	}
	  	},
		  // 创建页面
		created(){
			var _this=this;
			// 获取上一页面的参数

			var texts = decodeURI(window.location.href.split("?")[1]);
			var sn = decodeURI(texts.split("&")[0]);
			var phone = decodeURI(texts.split("&")[1]);
			_this.sn=sn.slice(3);
			_this.sendContactPhone=phone.slice(6);
		},
	  	//页面加载需要执行的方法
	  	mounted:function(){
			var _this=this;
        	_this.getData();
       },
	  	methods: {
			  //   返回
			goBack(){
				window.history.back(-1); 
			},
			//   点击放大图片弹窗
			viewImgs(e){
				// console.log("ab",e)
				this.maxImgIndex=e;
				this.maxImgBox=true;
			},
			//  点击关闭图片弹窗
			closeImg(){
				this.maxImgBox=false;
			},
			// upvideo(event){
			// 	alert('111');
			// 	var _this = this;
		    //   	var current = event.target.files[0];
			// 	  alert(current);
			//   	//console.log("视频地址1：",current);
			//   	var url = URL.createObjectURL(current);
			//   	var audioElement = new Audio(url);
			// 	 alert(audioElement);
			//   	audioElement.addEventListener("loadedmetadata", function (_event) {
			//   	var duration = audioElement.duration;
			// 	  alert(duration);
			// 	})
               
			// },
			 
	  		//弹窗
	  		popup:function(msg){
	  			var _this=this;
	  			_this.toastMsg=msg;
	  			_this.showstate=true;
	  			setTimeout(()=>{
			        _this.showstate=false;
			    },1500);
	  		},
			// 获取页面数据
			getData:function(){
				var _this=this;
				console.log( _this.sn)
				axios.get('/api/mobile/fixlist', {
					params: { sn: _this.real_sn }
				})
				.then(function (res) {
					// console.log(res);
					_this.deviceName=res.data.good_name;
					
				}).catch(function (error) {
					console.log(error);
				});
			},
			// 防止快速点击
			throttle(intervalTime){
				//获取当前时间的时间戳
				let now = new Date().valueOf();
				if(this.lastTime == 0 || (now-this.lastTime) > intervalTime){
					//重置上一次点击时间，intervalTime是我自己设置的间隔时间，根据自己的需要传参
					this.lastTime = now;
					console.log('间隔大于2秒，触发方法');
					this.submit();
					//添加自己要调用的方法
				}else{
					console.log('不触发');
				}
			},
	  		//提交按钮
	  		submit:function(){
				
				//return false;
	  			var _this=this;
	  			// _this.popup("提交成功");
				console.log("图片地址：",_this.imgSrc);
				// return false;
				if(!_this.faultCause){
					_this.popup("请填写故障原因");
					return false;
				}else if(!_this.sendContactName){
					_this.popup("请填写联系人姓名");
					return false;
				}else if(!_this.sendContactPhone){
					_this.popup("请填写联系电话");
					return false;
				}
				// else if(!_this.maintainObj){
				// 	_this.popup("请填写维修项目");
				// 	return false;
				// }else if(!_this.maintainName){
				// 	_this.popup("请填写维修人姓名");
				// 	return false;
				// }
				else{
					var time  = _this.maintainTime.replace('/', '-');
					console.log(time);
					//return false;
					axios.post('/api/mobile/afixAdd', {
						tagslogs_sn:_this.real_sn,
						cause:_this.faultCause,
						project:_this.maintainObj,
						personnel:_this.maintainName,
						date:time,
						img:_this.imgSrc,
						video:_this.videoSrc,
						danwei:_this.sendUnit,
						contacts:_this.sendContactName,
						telphone:_this.sendContactPhone,
						email:_this.sendContactEmail
					})
					.then(function (res) {
						// console.log("提交：",res);
						// _this.popup("提交成功");
						// console.log(res.data.info)
						alert("提交成功")
						//跳转页面详情
						if(res.data.status==1){
							// location.href="/mobile/maintenancelist/details.html?id="+res.data.info;
							window.location.replace("/mobile/maintenancelist/details.html?id="+res.data.info+"&sn="+_this.sn);  //跳转
							_this.videoSrc="";
						}else {
							return false
						}
						
						// _this.imgSrc = res.data.video;
					})
					.catch(function (error) {
						console.log(error);
					});
				}
	  		},
			
			
			//选择图片
			choiceImg(){
			    this.$refs.filElem.dispatchEvent(new MouseEvent('click'));
			},
		    //图片预览
	  		initImageTools(){
	  			console.log("图片预览")
	            //初始化 viewerjs
	            const ViewerDom = document.getElementById('imgBox');
	            const viewer = new Viewer(ViewerDom, {
	                url: "data-imgurl",
	                show: function(){
	                    viewer.update();
	                }
	            });
	
	        },
	  		//添加图片
            addImg(){
				//alert("1112");
                let _this = this;
                var obj = _this.getId('add-pic-btn'),
                    obArr =  obj.files,
                    length = obArr.length,
                    arr = [],
                    limitNum = _this.limitNum;
                for(let x of obArr){
                    var params = {name: x.name, src: x.src};
                    arr.push(params);
                }
                _this.allArr = [..._this.allArr,...arr];
                //定义一个函数作回调
                const Pro = function () {
                    return new Promise(function (resolve, reject) {
                        arr.forEach((v,i,array)=>{
                            resolve(array)
                        });
                    })
                    _this.initImageTools();
                };
                Pro().then((newArr)=>{
                    // console.log(newArr);

					var srcArr=[];
					// var srcArr1=[];
					//合并数组,先合并在删除多余；
                    var len1 = _this.list.length,
                        len2 = newArr.length;
                    var d = [..._this.list,...newArr];
                    _this.list = d;
						srcArr=d;
                       console.log(len1,len2,d)
                    if(d.length > limitNum){
                        _this.popup("最多只能上传"+limitNum+"张图片");
                        _this.list.splice(limitNum,d.length-limitNum);
                    }

					// console.log("OO:",_this.allArr[0].src)
					

					
                    for(let i=0; i<newArr.length; i++) {
                        var reader = new FileReader();
                        if (!reader) {
                            console.log('对不起，您的浏览器不支持！请更换浏览器试一下');
                            return
                        }
                        //读取成功
                        reader.onload = function(e) {
                            console.log("读取成功：",e)
							// console.log(e);

								
                            var _src = e.target.result;
                            newArr[i].src = _src;
							srcArr1.push(_src);
							
							// console.log("srcArr1:",srcArr1)
							setTimeout(function(){
								if(i==newArr.length-1){

									if(srcArr1.length==1){
										console.log("1张")
										axios.post('/api/upload/baseimgs_upload.html?path=img', {
											img:srcArr1     // 参数
										})
										.then(function (res) {
											console.log('成功');
											// console.log("res:",res);
											// console.log("img:",res.data.img);
											_this.imgSrc = res.data.img;
											_this.lists1=_this.list;
											_this.ifUploadImg=false;   //隐藏正在上传图片的动画

											setTimeout(function(){
												_this.imgsss=false;
											},200)
										})
										.catch(function (error) {
											console.log('失败2');
											console.log(error);
											_this.ifUploadImg=false;  //隐藏正在上传图片的动画
										});
									}else{
										console.log("多张")
										//return false;
										axios.post('/api/upload/baseimgs_upload.html?path=img', {
											img:srcArr1     // 参数
										})
										.then(function (res) {
											console.log('成功');
											// console.log("res:",res);
											// console.log("img:",res.data.img);
											_this.imgSrc = res.data.img;
											_this.lists1=_this.list;
											_this.ifUploadImg=false;   //隐藏正在上传图片的动画

											setTimeout(function(){
												_this.imgsss=false;
											},500)


										})
										.catch(function (error) {
											console.log('失败');
											console.log(error);
											_this.ifUploadImg=false;  //隐藏正在上传图片的动画
										});
									}
								}
							},600);
							// console.log("MM:",srcArr1);

							// _this.ifUploadImg=true;  //显示正在上传图片的动画
							// return false;
							
							
                            _this.clearVal();
                        };
                        reader.onloadstart=function(){
                            console.log('开始');
							_this.ifUploadImg=true;  //显示正在上传图片的动画
                        };
                        reader.onprogress=function(e){
                            if(e.lengthComputable){
                                console.log("正在读取文件");
                            }
                        };
                        reader.error = function(){
                            console.log("读取异常");
							_this.ifUploadImg=false;  //隐藏正在上传图片的动画
                        };
                        reader.readAsDataURL(obj.files[i]);
                    }
                    
                });
            },
            //删除图片
            delImg(i){
//              var flag = confirm(`确认要删除名为：${this.list[i].name}的图片？`);
				var _this = this
				var flag=true;
                if(flag) {
                    _this.list.splice(i,1);
                    _this.allArr.splice(i,1);
                    console.log("删除后：",_this.allArr);
					// 同时删除上传图片的地址数组
					srcArr1.splice(i,1);
					console.log("srcArr1:",srcArr1);


					if(srcArr1.length==1){
						console.log("1张")
						axios.post('/api/upload/baseimgs_upload.html?path=img', {
							img:srcArr1     // 参数
						})
						.then(function (res) {
							console.log('成功');
							console.log("res:",res);
							// console.log("img:",res.data.img);
							_this.imgSrc = res.data.img;
							_this.lists1=_this.list;
							_this.ifUploadImg=false;   //隐藏正在上传图片的动画

							
						})
						.catch(function (error) {
							console.log('失败2');
							console.log(error);
							_this.ifUploadImg=false;  //隐藏正在上传图片的动画
						});
					}else{
						console.log("多张")
						//return false;
						axios.post('/api/upload/baseimgs_upload.html?path=img', {
							img:srcArr1     // 参数
						})
						.then(function (res) {
							console.log('成功');
							// console.log("res:",res);
							// console.log("img:",res.data.img);
							_this.imgSrc = res.data.img;
							_this.lists1=_this.list;
							_this.ifUploadImg=false;   //隐藏正在上传图片的动画
							
						})
						.catch(function (error) {
							console.log('失败');
							console.log(error);
							_this.ifUploadImg=false;  //隐藏正在上传图片的动画
						});
					}


					// _this.imgSrc=_this.allArr;
                }
                //这个得清空，不然全部被删除后，无法再次上传同一图片
               if(_this.list.length<=0){
				_this.clearVal();
               }
            },
            //每次上传完清除一下value
            clearVal(){
                this.getId('add-pic-btn').value = null;
            },
            //dom
            getId(id){
                return document.getElementById(id);
            },



			//选择视频
			choiceVideo(){
				//alert("1111");
				this.$refs.filElemVideo.dispatchEvent(new MouseEvent('click'));
			},
			//上传视频
	  		getBigectURL (event) {
				var is_ios=this.is_ios();
				console.log(is_ios);
				//alert(is_ios);
				//$("#sp").html(is_ios);
				//return false;
				var _this = this;
				var current = event.target.files[0];
				//console.log(current);
				if(is_ios==1){

					var fileReader = new FileReader();
					
					fileReader .readAsDataURL(current);
					fileReader .onload = function (e) {

						_this.ifUploadVideo=true;   //显示正在上传视频的动画
						axios.post('/api/upload/video_upload.html?path=video', {
							img:e.currentTarget.result      // 参数
						})
						.then(function (res) {
							console.log(res.data.video);
							//alert(res.data.video)
							// $("#sp").html(res.data.video);
							_this.ifUploadVideo=false;   //隐藏正在上传视频的动画
							// console.log(res.data.video);
							_this.videoSrc = res.data.video;
							_this.videoSrc1 =  e.currentTarget.result;
							_this.popup("上传成功");
							//console.log(res);		
						})
						.catch(function (error) {
							console.log(error);
							_this.ifUploadVideo=false;   //隐藏正在上传视频的动画
						});
					}

				}else{
					//111start
					//alert("11");
					// console.log("11");
					var url = URL.createObjectURL(current);
					var audioElement = new Audio(url);
					audioElement.addEventListener("loadedmetadata", function (_event) {
					var duration = audioElement.duration;
					//alert(duration);			
					if (duration > 31) {
						alert('视频时长不能超过30秒');
						return false;
					} else {
						
						var fileReader = new FileReader();
						fileReader .readAsDataURL(current);
						_this.ifUploadVideo=true;  //显示正在上传视频的动画
						fileReader .onload = function (e) {
						//_this.videoSrc1 = e.currentTarget.result;
						//alert("33");
						axios.post('/api/upload/video_upload.html?path=video', {
							img:e.currentTarget.result      // 参数
						})
						.then(function (res) {
                            //alert(e.currentTarget.result);
							//alert("44");
							//alert(res.data.video);
							// $("#sp").html(res.data.video);
							_this.ifUploadVideo=false;   //隐藏正在上传视频的动画
							console.log(res.data.video);
							_this.videoSrc = res.data.video;
							_this.videoSrc1 =  e.currentTarget.result;
							//_this.popup("上传成功");
							//console.log(res);		
						})
						.catch(function (error) {
							alert("上传失败");
							//alert(error);
							_this.ifUploadVideo=false;  //隐藏正在上传视频的动画
							console.log(error);
						});
						
						//console.log("视频地址2：",_this.videoSrc)
					}
						
					}
				});
					//111end
				}
		     
		     
		   
		    },
			//删除视频
            delVideo(){
            	var _this = this;
            	_this.videoSrc="";
				_this.$refs.filElemVideo.value = null;
            },

			is_ios() {
			let ua = navigator.userAgent.toLowerCase();
			//android终端
			let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1; //ios终端
			let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
			if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
					//ios
				    return  1 ;

		    } else if (/(Android)/i.test(navigator.userAgent)) {
					//android
					return  0 ;
			}
		
		},







	  		
	  	},
	})
</script>
{include file="public/footer"}
